<script lang="ts" setup>
import type { DataType } from './types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import { Button, Image, message, Popconfirm, Space } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteAsset, getAssets } from '#/api/system';
import Icon from '#/components/Icons';
import { formatImagesList } from '#/utils';

defineOptions({
  name: 'UserAdminAssetIndex',
});

const router = useRouter();
const routeMeta = router.currentRoute.value.meta;
const viewTitle = routeMeta.title.replace('管理', '');

function isImageFile(filename: string) {
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp']; // 图片格式的后缀列表

  const fileExtension = filename
    .slice(Math.max(0, filename.lastIndexOf('.')))
    .toLowerCase(); // 提取文件的后缀并转换为小写

  return imageExtensions.includes(fileExtension); // 检查提取到的后缀是否在图片格式的后缀列表中
}
const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    isHover: true,
  },
  checkboxConfig: {
    labelField: 'name',
    highlight: true,
    range: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50, showOverflow: true },
    { field: 'user', title: '用户', slots: { default: 'user' } },
    { field: 'file_size', title: '文件大小' },
    { field: 'filename', title: '文件名' },
    { field: 'preview', title: '预览', slots: { default: 'preview' } },
    { field: 'file_path', title: '文件路径' },
    { field: 'status', title: '状态' },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 240,
    },
  ],
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    layouts: ['Total', 'Sizes', 'PrevPage', 'Number', 'NextPage', 'FullJump'], // 带总条数和每页大小选择
    pageSize: 10,
    pageSizes: [10, 20, 50, 100],
  },




  proxyConfig: {
      props: {
        result: 'list',   // 这是你的数据列表字段
        total: 'total',   // 这是总条数字段，分页组件需要它
      },
      ajax: {
        query: async ({ page }) => {
          const { data } = await getAssets({
            page: page.currentPage,
            limit: page.pageSize,
          });

          data.list = formatImagesList(data.list, 'file_path');
        

          // 确保返回 list 和 total
          return {
            list: data.list,
            total: data.total,
          };
        },
      },
  },

  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({
  gridOptions,
});

/**
 * 删除操作
 */
const handleDelete = async (row?: DataType) => {
  const $table = GridApi.grid;
  if ($table && row?.id) {
    const { msg } = await deleteAsset(row);
    $table.remove(row);
    message.success(msg);
  }
};
</script>




<template>
  <Page auto-content-height>
    <Grid :table-title="`${viewTitle}列表`">
      <template #preview="{ row }">
        <Image
          v-if="row.file_path && isImageFile(row.file_path)"
          :src="row.file_path"
          :height="60"
          :width="60"
          style="    height: 60px;width:auto
    object-fit: contain;
    width: auto;"
         
        />
        <span v-else> <Icon icon="ri:file-line" /></span>
      </template>
      <template #user="{ row }"> 用户名:{{ row.user?.user_login }} </template>

      <template #action="{ row }">
        <Space>
          <Popconfirm
            cancel-text="否"
            ok-text="是"
            title="确认删除？"
            @confirm="handleDelete(row)"
          >
            <Button danger type="primary">
              <template #icon>
                <span class="anticon">
                  <Icon icon="ri:delete-bin-line" />
                </span>
              </template>
              删除
            </Button>
          </Popconfirm>
        </Space>
      </template>
    </Grid>
  </Page>
</template>
